<template>
<div class="common-layout relative h-full w-full">
    <el-container class="h-full w-full">
        <el-aside width="200px">
            <div class="h-full flex flex-col flex-nowrap">
                <div class="m-0 px-8 py-4 cursor-pointer" @click="navigateTo('/')">
                    <client-only>
                        <img class="logo" v-if="appstore.theme === 'dark'" src="~/assets/img/images/logo_light.png" alt="">
                        <img class="logo" v-else src="~/assets/img/images/logo_dark.png" alt="">
                    </client-only>
                </div>
                <div class="flex-1 py-8 px-4 w-full overflow-hidden">
                    <el-scrollbar height="100%">
                        <ul>
                            <li v-for="(item,index) in siderMenu" :class="{'text-orange-500 bg-gray-300/[0.3] dark:text-yellow-300 dark:bg-white/[0.3]':(route.path === item.path)}" @click.stop="RouterTo(item)" :key="index" class="py-2 hover:shadow-xl rounded cursor-pointer dark:hover:bg-white/[0.3] hover:bg-gray-400/[0.1]">
                                <div class="flex flex-row items-center px-4 text-sm">
                                    <svg-icon :name="item.icon" class="text-sm mr-2"/>
                                    <span>{{item.name}}</span>
                                </div>
                            </li>
                        </ul>
                    </el-scrollbar>
                </div>
            </div>
        </el-aside>
        <el-container>
            <el-header style="padding:0px;height: auto">
                <Header :showLogo="false"/>
            </el-header>
            <el-main style="padding:0px">
                <div class="h-full bg-white rounded-tl-2xl overflow-clip border light:border-slate-100 dark:border-0  border-b-0 border-r-0">
                    <el-scrollbar height="100%">
                        <NuxtPage :foobar="123" />
                    </el-scrollbar>
                </div>
            </el-main>
        </el-container>
    </el-container>
    <Pattern/>
</div>
</template>
<script setup lang="ts">
const appstore = useAppStore()
const layoutStore = useLayoutStore()
const route = useRoute()
useHead({
  title: '我的应用',
  htmlAttrs: {
    // 'class': ()=>appstore?.theme,
    // 'data-theme':()=>appstore?.theme,
  },
})
const {siderMenu} = layoutStore
function RouterTo(item: any) {
    navigateTo(item.path)
}

</script>
<style lang="scss" scoped>
.logo{
    display: block;
}
</style>